<template>
  <div class="e-wrap">
    <!-- 搜索条件 -->
    <div class="e-filter-options">
      <div class="e-item">
          <span class="title">上级部门名称</span>
          <div class="dis-block">
              <w-select :options='departParentList' v-model="queryParams.id"></w-select>
          </div>
      </div>
      <div class="e-item">
          <span class="title">部门名称</span>
          <div class="dis-block">
              <w-input :holder="`请填写`" v-model="queryParams.departmentName"></w-input>
          </div>
      </div>
      <!-- <div class="e-item">
          <span class="title">部门编号</span>
          <div class="dis-block">
              <w-input :holder="`请填写`" v-model="queryParams.departCode"></w-input>
          </div>
      </div> -->
      <!-- 搜索按钮 -->
      <div class="filter-btn">
          <w-button @on-click='changePage(1)'>搜索</w-button>
      </div>
    </div>
    <!-- 部门列表 -->
    <div class="e-filter-list">
      <div class="e-add clearfix">
          <w-button @on-click="addDepartOption('one')">新增部门</w-button>
          <span>共计：{{departAllList.totalCount}}条</span>
      </div>
      <w-table :columns="columns"></w-table>
      <div class="clearfix" v-if="departAllList.totalCount">
        <div class="add-classify" v-for="(val, index) in departAllList.recordList" :key='index'>
          <!-- 一级部门 -->
          <div class="one clearfix menu">
            <div class="clssify fl">
              <span class="icon-classify" :class="{'icon-more': val.isShow, 'icon-little': !val.isShow}" @click="val.isShow = !val.isShow"></span>
              <span style="font-size: 14px;">{{val.departmentName}}</span>
              <button class="add"  @click="addDepartOption(val.id)">+新增下级部门</button>
            </div>
            <div class="options">
              <span class="icon-text" @click="updateDepart(val)">编辑 | </span>
              <span class="icon-text" @click="delDepartment = true; delParams.ids = [val.id]">删除 |</span>
              <span class="icon-text" @click="seeDapart(val)">查看</span>
            </div>
          </div>

          <!-- 二级部门 -->
          <div v-if="val.sonDepartment && val.sonDepartment.length > 0 && val.isShow">
            <div class="two clearfix" v-for="(v, i) in val.sonDepartment" :key='i'>
              <div class="menu">
                <div class="clssify fl">
                  <!-- <span class="icon-classify icon-more"></span> -->
                  <span>{{v.departmentName}}</span>
                </div>
                <div class="options">
                  <span class="icon-text" @click="updateDepart(v, val.id)">编辑 | </span>
                  <span class="icon-text" @click="delDepartment = true; delParams.ids = [v.id]">删除 |</span>
                  <span class="icon-text" @click="seeDapart(v, val.departmentName)">查看</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="fr" style="margin: 25px">
          <w-paging :current="departAllList.currentPage" :total="departAllList.pageCount" @on-page='changePage'></w-paging>
        </div>
      </div>
      
      <!-- 没有数据时 -->
      <div v-else style="text-align: center;line-height: 50px;">暂无数据</div>
    </div>

    <!-- 新增部门弹框 -->
    <w-panel-fixed-wrap v-model="addDepartment" :panel-title="true" title="新增部门" :width="`650px`" :height="`430px`" @on-confirm='departOption'>
      <div class="depart-panel">
        <div class="e-item" v-if='isOne'>
          <span class="title">上级部门</span>
          <div class="dis-block">
              <w-select :options='departParentList' v-model="addParams.parentId"></w-select>
          </div>
          <em>若需要添加上级部门，则不需要选择上级</em>
        </div>
        <div class="e-item">
          <span class="title">部门编号</span>
          <div class="dis-block">
              <w-input :holder="`请填写`" v-model="addParams.departCode"></w-input>
          </div>
          <em>编号格式为名称首字母</em>
        </div>
        <div class="e-item">
          <span class="title">部门名称</span>
          <div class="dis-block">
              <w-input :holder="`请填写`" v-model="addParams.departmentName"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title" style="margin-top:10px;">部门描述</span>
          <div class="dis-block" style="vertical-align:top;">
              <textarea name="" id="" v-model="addParams.departDesc"></textarea>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 查看部门弹框 -->
    <w-panel-fixed-wrap v-model="seePanel" :panel-title="true" title="查看部门" :width="`440px`" :height="`430px`" :showBtns='false' :showClose='true'>
      <div class="depart-panel">
        <div class="e-item" v-if='seeParams.parentName'>
          <span class="title">上级部门</span>
          <div class="dis-block">
              <w-input v-model="seeParams.parentName" :disabled="true"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">部门编号</span>
          <div class="dis-block">
            <w-input v-model="seeParams.departCode" :disabled="true"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">部门名称</span>
          <div class="dis-block">
              <w-input v-model="seeParams.departmentName" :disabled="true"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title" style="margin-top:10px;">部门描述</span>
          <div class="dis-block" style="vertical-align:top;">
              <textarea name="" id="" v-model="seeParams.departDesc" :disabled="true"></textarea>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 删除部门 -->
    <w-panel-fixed-wrap v-model="delDepartment"  :panel-title="true" title="删除部门" :width="`260px`" :height="`200px`" @on-confirm='delOption'>
      <div class="panel-classify">
        是否确认删除部门
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      columns: [
        {title: '部门名称', width: '70%'},
        {title: '操作', width: '30%'}
      ],
      isOne: false, // 判断是一级部门还是二级部门
      addDepartment: false,
      delDepartment: false,
      seePanel: false,
      departAllList: [], // 所有部门列表
      departParentList: [], // 上级部门列表
      // 查询部门 -- 参数
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: '1',
        showCount: '10',
        id: '',
        departmentName: '',
        departCode: ''
      },
      // 查询上级部门 -- 参数
      queryParentParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: '1',
        showCount: '10',
        type: 'oneDeparts'
      },
      // 删除部门 -- 参数
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: []
      },
      // 新增部门 -- 参数
      addParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        parentId: '',
        departmentName: '',
        departDesc: '',
        departCode: '',
        type: ''
      },
      //  查看部门
      seeParams: {
        parentName: '',
        departDesc: '',
        departmentName: '',
        departCode: ''
      }
    }
  },
  created() {
    this._getDepartList()
    this._getOneDepartList()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 获取部门列表
    _getDepartList() {
      this.queryParams.accessToken = this.token
      apiSystemMange.getDepartLis(this.queryParams).then(data => {
        if (data.code != '200') return
        this.departAllList = data.data
        if (this.departAllList.totalCount) {
          this.departAllList.recordList.forEach(item => {
            this.$set(item, 'isShow', true)
          })
        }
      })
    },
    // 获取上级部门列表
    _getOneDepartList() {
      this.queryParentParams.accessToken = this.token
      apiSystemMange.getDepartLis(this.queryParentParams).then(data => {
        if (data.code != '200') return
        this.departParentList = data.data.map(item => {
          return {
            value: item.id,
            label: item.departmentName
          }
        })
        this.departParentList.unshift({value: '', label: '请选择'})
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getDepartList()
    },
    // 删除部门
    delOption() {
      this.delParams.accessToken = this.token
      apiSystemMange.delDepart(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.delDepartment = false
          this.changePage(1)
        })
      })
    },
    // 新增部门
    addDepartOption(par) {
      this.addDepartment = true
      this.addParams.departmentName = ''
      this.addParams.departDesc = ''
      this.addParams.departCode = ''
      this.addParams.id = ''
      if (par != 'one') {
        this.isOne = true
        this.addParams.parentId = par
        this.addParams.type = 'two'
      } else {
        this.isOne = false
        this.addParams.type = 'one'
      }
      this.optionType = 'add'
    },
    departOption() {
      this.addParams.accessToken = this.token
      let toastStr = ''
      if (this.optionType == 'add') {
        this.addParams.id = ''
        toastStr = '新增成功'
      }
      if (this.optionType == 'update') {
        toastStr = '修改成功'
        this.addParams.type = ''
      }
      apiSystemMange.addDepart(this.addParams).then(data => {
        if (data.code != '200') return
        this.$toast(toastStr, () => {
          this.addDepartment = false
          this._getDepartList()
          this._getOneDepartList()
        })
      })
    },
    // 编辑
    updateDepart(data, parentId) {
      this.optionType = 'update'
      this.addParams.id = data.id
      this.addParams.departmentName = data.departmentName
      this.addParams.departDesc = data.departDesc
      this.addParams.departCode = data.departCode
      if (parentId) {
        this.addParams.parentId = parentId
        this.isOne = true
      } else {
        this.addParams.parentId = ''
        this.isOne = false
      }
      this.addDepartment = true
      this.optionType = 'update'
    },
    // 查看
    seeDapart(data, name) {
      this.seePanel = true
      this.seeParams = data
      this.seeParams.departDesc = data.departDesc
      this.seeParams.departmentName = data.departmentName
      this.seeParams.departCode = data.departCode
      if (name) {
        this.seeParams.parentName = name
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  .e-item {
    margin-left: 20px;
    &:nth-of-type(1) {
      margin-left: 0;
    }
    .title {
      width: 74px;
      text-align: right;
    }
    .dis-block {
      vertical-align: middle;
    }
  }
  .filter-btn {
    margin: 40px auto 20px;
    text-align: center;
  }
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
    span {
      float: right;
      color: rgba(49, 49, 49, 1);
      line-height: 20px;
    }
  }
}
.depart-panel {
  .e-item {
    display: block;
    margin-bottom: 20px;
    margin-left: 0 !important;
    em {
      color: $color-main;
      font-size: 11px;
      margin-left: 16px;
    }
    .dis-block {
      width: 260px;
      vertical-align: middle;
    }
    textarea {
      height: 90px;
      padding: 5px;
    }
  }
}
.menu {
  height: 46px;
  line-height: 46px;
}
.add-classify {
  width: 100%;
  font-size: 12px;
  border: 1px solid $border-gray-light;
  border-top: none;
  .one {
    // border-top: 0;
    padding-left: 5%;
  }
  .two {
    padding-left: 8%;
    border-top:  1px solid $border-gray-light;
  }
}
.add {
  border: 1px solid #DBDBDB;
  height: 22px;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 10px;
  padding: 0 10px;
}
.icon-classify {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 12px;
  vertical-align: sub;
  cursor: pointer;
  &.icon-more {
    background: url(../../assets/classify-more-big.png) no-repeat;
  }
  &.icon-little {
    background: url(../../assets/classify-big.png) no-repeat;
  }
}
.clssify {
  width: 70%;
  display: inline-block;
}
.options {
  width: 30%;
  display: inline-block;
  text-align: center;
  .icon-text {
    color: $color-main;
    cursor: pointer;
  }
}
</style>